<template>
    <div style="width: 800px">
        <!-- Table -->
        <el-table :data="configs">
            <el-table-column prop="email_account" label="邮件账号"></el-table-column>
            <el-table-column prop="receive_server" label="接收服务器"></el-table-column>
            <el-table-column prop="smtp_server" label="SMTP服务器"></el-table-column>
            <el-table-column label="操作">
                <template v-slot:default="scope">
                    <el-button @click="editConfig(scope.row)">编辑</el-button>
                    <el-button @click="delConfig(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- New Config Button -->
        <router-link to="/mail">
            <el-button type="primary">返回主页</el-button>
        </router-link>
        <el-button @click="newConfig">新建</el-button>
        <!-- Dialog -->
        <el-dialog v-model="dialogVisible">
            <el-form :model="currentConfig">
                <el-form-item label="邮箱账号" prop="email_account">
                    <el-input v-model="currentConfig.email_account" placeholder="请输入邮箱账号"></el-input>
                </el-form-item>
                <el-form-item label="别名" prop="email_account">
                    <el-input v-model="currentConfig.remark" placeholder="一眼就能认出的名字"></el-input>
                </el-form-item>
                <el-form-item label="接收服务器类型" prop="receive_server_type">
                    <el-select v-model="currentConfig.receive_server_type" placeholder="请选择接收服务器类型">
                        <el-option label="IMAP" value="IMAP"></el-option>
                        <el-option disabled label="POP3" value="POP3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="currentConfig.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="接收服务器" prop="receive_server">
                    <el-input v-model="currentConfig.receive_server" placeholder="请输入接收服务器"></el-input>
                </el-form-item>
                <el-form-item label="是否启用SSL" prop="ssl_for_receive_enabled">
                    <el-switch v-model="currentConfig.ssl_for_receive_enabled"></el-switch>
                </el-form-item>
                <el-form-item label="接收服务器端口" prop="receive_server_port">
                    <el-input type="number" v-model="currentConfig.receive_server_port"
                        placeholder="请输入接收服务器端口"></el-input>
                </el-form-item>
                <el-form-item label="发件服务器" prop="smtp_server">
                    <el-input v-model="currentConfig.smtp_server" placeholder="请输入 SMTP服务器"></el-input>
                </el-form-item>
                <el-form-item label="是否启用SSL" prop="ssl_for_smtp_enabled">
                    <el-switch v-model="currentConfig.ssl_for_smtp_enabled"></el-switch>
                </el-form-item>
                <el-form-item label="发件服务器端口" prop="smtp_server_port">
                    <el-input type="number" v-model="currentConfig.smtp_server_port"
                        placeholder="请输入 SMTP服务器端口"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveConfig">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, toRefs, onMounted, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';


const configs = ref([]);
const instance = getCurrentInstance()
const dialogVisible = ref(false);
const currentConfig = ref({
    receive_server_type: 'IMAP'
});
const editConfig = (row) => {
    currentConfig.value = { ...row };
    dialogVisible.value = true;
};
const getConfig = () => {
    fetch('/api/mail-account', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + sessionStorage.getItem('x-token')
        }
    })
        .then(response => response.json())
        .then(data => {
            configs.value = data;
        })
        .catch(error => {
            console.error('Error getting configs:', error);
        });
};
const newConfig = () => {
    currentConfig.value = {
        receive_server_type: 'IMAP',
        ssl_for_receive_enabled: false,
        ssl_for_smtp_enabled: true,
    };
    dialogVisible.value = true;
};
const saveConfig = () => {
    dialogVisible.value = false;
    fetch('/api/mail-account', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + sessionStorage.getItem('x-token')
        },
        body: JSON.stringify(currentConfig.value)
    })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                ElMessage({
                    message: '已保存',
                    type: 'success',
                })
                dialogVisible.value = false;
                getConfig()
            } else {
                ElMessage({
                    message: data.message,
                    type: 'warn',
                })
            }
        })
        .catch(error => {
            console.error('Error saving account:', error);
        });
    console.log(currentConfig)
};
const delConfig = (config) => {
    instance.appContext.config.globalProperties.$confirm('确认删除该配置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        fetch(`/api/mail-account/${config.id}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + sessionStorage.getItem('x-token')
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    ElMessage({
                        message: '已删除',
                        type: 'success',
                    })
                    configs.value = configs.value.filter(item => item.id !== config.id);
                } else {
                    ElMessage({
                        message: data.message,
                        type: 'warn',
                    })
                }
            })
            .catch(error => {
                console.error('Error deleting config:', error);
            });
    }).catch(() => {
        // Do nothing if the user cancels the deletion
    });
}

onMounted(getConfig);



</script>